<template>
  <div class="business-task-manage">
    <el-card>
      <el-form ref="ruleForm" :model="ruleForm" :inline="true" label-width="120px" class="ruleForm">
        <el-form-item label="任务ID：" prop="id">
          <el-input v-model="ruleForm.id" />
        </el-form-item>
        <el-form-item label="商家ID：" prop="sellerId">
          <el-input v-model="ruleForm.sellerId" />
        </el-form-item>
        <el-form-item label="店铺ID：" prop="shopId">
          <el-input v-model="ruleForm.shopId" />
        </el-form-item>
        <el-form-item label="任务显示时间：" prop="shopId">
          <el-date-picker
            v-model="ruleForm.missionDisplayTime"
            type="datetime"
            placeholder="选择日期时间"
            value-format="yyyy-MM-dd hh:mm:ss"
          />
        </el-form-item>
        <el-form-item label="任务失效时间：" prop="shopId">
          <el-date-picker
            v-model="ruleForm.missionEndTime"
            type="datetime"
            placeholder="选择日期时间"
            value-format="yyyy-MM-dd hh:mm:ss"
          />
        </el-form-item>
        <el-form-item label="任务类型：" prop="missionType">
          <el-select v-model="ruleForm.missionType">
            <el-option label="普通" value="NORMAL" />
            <el-option label="高级" value="ADVANCED" />
            <el-option label="多日" value="DAYS" />
          </el-select>
        </el-form-item>
        <el-form-item label="任务状态：" prop="missionStatus">
          <el-select v-model="ruleForm.missionStatus">
            <el-option label="全部" value />
            <el-option label="正常" value="ENABLE" />
            <el-option label="已取消" value="CANCELLED" />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">查询</el-button>
        </el-form-item>
      </el-form>

      <el-table v-loading="isLoading" :data="tableData" class="table" style="width: 100%" border>
        <el-table-column
          label="ID"
          width="180"
          align="center"
        >
          <template slot-scope="scope">
            <div>商家ID：{{ scope.row.user_id || '/' }}</div>
            <div>店铺ID：{{ scope.row.shop_id || '/' }}</div>
            <div>任务ID：{{ scope.row.id }}</div>
          </template>
        </el-table-column>
        <el-table-column
          prop="mission_title"
          label="任务标题"
          width="150"
          align="center"
        />
        <el-table-column prop="goods_title" label="宝贝图片" width="100" align="center">
          <template slot-scope="scope">
            <input-image :src="scope.row.goods_picture" />
          </template>
        </el-table-column>
        <el-table-column prop="goods_title" label="宝贝详情" width="300" align="center">
          <template slot-scope="scope">
            <div>{{ scope.row.goods_sku }}</div>
            <div>宝贝标题：{{ scope.row.goods_title || '/' }}</div>
            <div>宝贝价格：{{ scope.row.goods_price || '/' }} 金币</div>
            <div>宝贝地址：{{ scope.row.goods_url }}</div>
          </template>
        </el-table-column>
        <el-table-column
          label="搜索关键词"
          width="200"
          align="center"
        >
          <template slot-scope="scope">
            <div>关键词：{{ scope.row.search_keyword || '/' }}</div>
            <div v-if="scope.row.search_price_range">价格区间：{{ scope.row.search_price_range.split(',')[0] }} ~ {{ scope.row.search_price_range.split(',')[1] }}</div>
          </template>
        </el-table-column>
        <el-table-column
          label="任务要求"
          width="300"
          align="center"
        >
          <template slot-scope="scope">
            <div>支付要求：{{ scope.row.payment_request || '/' }}</div>
            <div>任务要求：{{ scope.row.mission_request || '/' }}</div>
          </template>
        </el-table-column>
        <el-table-column
          label="账号要求"
          width="300"
          align="center"
        >
          <template slot-scope="scope">
            <div>地域限制：{{ scope.row.restriction_area || '不限' }}</div>
            <div>性别限制：{{ (scope.row.restriction_gender || '') | getSex }}</div>
            <div>年龄阶段：{{ scope.row.restriction_ageRange ? scope.row.restriction_ageRange + '岁' : '不限' }}</div>
            <div>购物类目：{{ scope.row.restriction_shopping_label || '/' }}</div>
            <div>信用等级：{{ Number(scope.row.restriction_credit_rating) | getCreditRating }}</div>
            <div>开通花呗：{{ scope.row.restriction_open_huabei ? '是' : '否' }}</div>
            <div>淘气值：{{ scope.row.restriction_taobao_value ? scope.row.restriction_taobao_value + '以上' : '不限' }}</div>
          </template>
        </el-table-column>
        <el-table-column
          label="高级要求"
          width="300"
          align="center"
        >
          <template slot-scope="scope">
            <div>订单留言：{{ scope.row.order_message || '/' }}</div>
            <div>特殊要求：{{ scope.row.special_request || '/' }}</div>
          </template>
        </el-table-column>
        <el-table-column
          label="任务时间"
          width="250"
          align="center"
        >
          <template slot-scope="scope">
            <div>显示时间：{{ scope.row.mission_display_time || '/' }}</div>
            <div>开始时间：{{ scope.row.mission_start_time || '/' }}</div>
            <div>结束时间：{{ scope.row.mission_end_time || '/' }}</div>
          </template>
        </el-table-column>
        <el-table-column
          prop="mission_remaining_number"
          label="任务剩余数量"
          width="200"
          align="center"
        >
          <template slot-scope="scope">
            {{ scope.row.mission_remaining_number }}/{{ scope.row.mission_number }}
          </template>
        </el-table-column>
        <el-table-column
          prop="mission_commission"
          label="任务佣金(金币)"
          width="150"
          align="center"
        />
        <el-table-column
          label="任务状态"
          width="150"
          align="center"
        >
          <template slot-scope="scope">
            {{ scope.row.mission_status | getMissionStatus }}
          </template>
        </el-table-column>
        <el-table-column prop="address" label="操作" align="center" width="150" fixed="right">
          <template slot-scope="scope">
            <el-button
              v-if="scope.row.mission_status !== 'CANCELLED'"
              type="text"
              @click="deleteMission(scope.row, scope.$index)"
            >取消任务</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        :page-size="10"
        layout="total, prev, pager, next, jumper"
        :total="total"
        @current-change="handleCurrentChange"
      />
    </el-card>
  </div>
</template>
<script>
import { sellerMissionSearch, sellerMissionDelete } from '@/api/user'
import inputImage from '@/components/_inputImage'
export default {
  components: {
    inputImage
  },
  filters: {
    getMissionStatus(status) {
      let StringType = ''
      switch (status) {
        case 'ENABLE':
          StringType = '正常'
          break
        case 'CANCELLED':
          StringType = '已取消'
          break
      }
      return StringType
    },
    getCreditRating(num) {
      let StringType = ''
      switch (num) {
        case 1 :
          StringType = '红心2以上'
          break
        case 2 :
          StringType = '红心3以上'
          break
        case 3 :
          StringType = '红心4以上'
          break
        case 4 :
          StringType = '红心5以上'
          break
        case 5 :
          StringType = '砖号以上'
          break
        default:
          StringType = '不限'
      }
      return StringType
    },
    getSex(sex) {
      let StringType = ''
      switch (sex) {
        case 'MAN' :
          StringType = '男'
          break
        case 'FEMAN' :
          StringType = '女'
          break
        default:
          StringType = '不限'
      }
      return StringType
    }
  },
  data() {
    return {
      isLoading: false,
      tableData: [],
      ruleForm: {
        missionStatus: '', // ENABLE-正常，CANCELLED-已取消
        pageNumber: 1
      },
      total: 0
    }
  },
  mounted() {
    this.sellerMissionSearch()
  },
  methods: {
    sellerMissionSearch() {
      this.isLoading = true
      sellerMissionSearch(this.ruleForm)
        .then(res => {
          console.log(res)
          this.tableData = res.list
          this.total = res.totalRow
          this.isLoading = false
        })
        .catch(() => {
          this.isLoading = false
        })
    },
    deleteMission(row, index) {
      this.$confirm('是否删除此商家任务?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        sellerMissionDelete({
          id: row.id
        }).then(res => {
          this.$message({
            type: 'success',
            message: '删除成功!'
          })
          this.tableData[index].mission_status = 'CANCELLED'
        })
      })
    },
    onSubmit() {
      this.ruleForm.pageNumber = 1
      this.sellerMissionSearch()
    },
    handleCurrentChange(page) {
      this.ruleForm.pageNumber = page
      this.sellerMissionSearch()
    }
  }
}
</script>
<style lang="scss">
.business-task-manage {
  .el-card {
    .el-form {
      .el-input {
        width: 200px;
      }
      .el-select {
        width: 200px;
      }
    }
  }
}
</style>
